<template>
    <div>
      <div class="tab">
        <div @click="router">
          <img src="../../assets/helpServerIcon/star.png" alt="">
          <p>收藏&nbsp;&nbsp;{{data.collect_count}}</p>
        </div>
        <div  @click="router">
          <img src="../../assets/helpServerIcon/commends.png" alt="">
          <p>评论&nbsp;&nbsp;{{data.comment_count}}</p>
        </div>
        <div @click="router">
          <img src="../../assets/helpServerIcon/xin.png" alt="">
          <p>点赞&nbsp;&nbsp;{{data.thumb_count}}</p>
        </div>
       <!-- <div @click="router">
          <img src="../../assets/helpServerIcon/shopping bag.png" alt="">
          <p>可购买&nbsp;&nbsp;{{data.collect_count}}</p>
        </div>-->
      </div>
    </div>
</template>

<script>
  import { Dialog } from 'vant';
    export default {
      name: "tabs",
      props:['data'],
      methods:{
        router(){
          Dialog.confirm({
            message: '是否前往app操作'
          }).then(() => {
            window.location.href="http://www.napin.com/download.html"
          }).catch(() => {
            // on cancel
          });

        }
      }
    }
</script>

<style lang="scss">
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
  .tab{
    padding-bottom:34px;
    background: #fff;
  }
}
.tab{
  width:100vw;
  height:15vw;
  background:#333333;
  position:fixed;
  bottom:0px;
  display:flex;
    div{
      flex:1;
      text-align:center;
      padding-top:2.4vw;
        img{
          width:4vw;
          height:4vw;
          display:inline-block;
        }
      p{
        color:#fff;
        font-size:10px;
        display:block;
      }
    }
}
</style>
